<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRoute } from 'vue-router'
import { 
  saveTableApi, 
  operatorNameApi,
  getAlphaprjApi
} from '@/api/account'
import { TableData } from '@/api/account/types'
import { ElRow, ElCol, ElInput, ElDatePicker, ElSelect, ElOption, ElButton, ElCard, ElSkeleton } from 'element-plus'
import { Icon } from '@/components/Icon'
import { Dialog } from '@/components/Dialog'
import Calendar from '../Dialog/components/Calendar.vue'
import dayjs from 'dayjs'

// 扩展TableData类型以包含API字段
interface ExtendedTableData extends TableData {
  apikey?: string
  apisecret?: string
}

const { query } = useRoute()
const { t } = useI18n()

const currentRow = ref<Nullable<ExtendedTableData>>(null)
const formLoading = ref(false)
// PC端编辑状态：false为只读，true为可编辑
const isEditing = ref(false)

// 日历对话框相关状态
const dialogCalendarVisible = ref(false)
const dialogTitle = ref('')
const actionType = ref('')
const calendarCurrentRow = ref<Nullable<ExtendedTableData>>(null)

// 表单数据
const formData = reactive({
  apikey: '',
  apisecret: '',
  initial: '',
  itime: '',
  oprid: '',
  remarks: ''
})

// 操手选项
const operatorOptions = ref<Array<{ id: number | string; name: string }>>([])

// 项目领取历史数据
const projectHistoryLoading = ref(false)
const projectList = ref<any[]>([])
// 默认显示当前时间往前一个月
const dateRange = ref<[string, string]>([
  dayjs().subtract(30, 'day').format('YYYY-M-D'),
  dayjs().format('YYYY-M-D')
])

// 移动端日期选择（独立开始和结束日期）
const mobileStartDate = ref<string>(dayjs().subtract(30, 'day').format('YYYY-M-D'))
const mobileEndDate = ref<string>(dayjs().format('YYYY-M-D'))

// 统计数据（从 getAlphaprjApi 获取）
const statsData = ref({
  profit: 0,          // 总利润
  income: 0,          // 空投总收益
  expenditure: 0,     // 总损耗
  project: 0          // 项目总数
})

// 累计统计数据（根据日期范围，从 getAlphaprjApi 获取）
const cumulativeStats = ref({
  sltprf: 0,   // 累计利润
  sltinc: 0,   // 累计空投收益
  sltexp: 0,   // 累计损耗
  sltprj: 0    // 累计项目
})

// 从 URL 参数填充表单字段
const fillFormFromUrl = () => {
  // 从 URL query 中读取字段值
  if (query.initial) {
    const initialValue = String(query.initial)
    // 如果已经有 $ 前缀就不加，否则加上
    formData.initial = initialValue.startsWith('$ ') ? initialValue : `$ ${initialValue}`
  }
  if (query.itime) {
    formData.itime = String(query.itime)
  }
  if (query.opr || query.oprid) {
    formData.oprid = String(query.opr || query.oprid)
  }
  if (query.remarks) {
    formData.remarks = String(query.remarks)
  }
}

// 获取账户详情
const getTableDet = async (skipLoading = false) => {
  if (query.id) {
    if (!skipLoading) {
      formLoading.value = true
    }
    try {
      // 先从 URL 参数填充表单字段
      fillFormFromUrl()
      
      // 使用日期选择器选中的日期范围
      const [startDate, endDate] = dateRange.value
      const res = await getAlphaprjApi({ 
        id: Number(query.id),
        beginday: dayjs(startDate).format('YYYY-MM-DD'),
        endday: dayjs(endDate).format('YYYY-MM-DD')
      })
      if (res && res.data) {
        currentRow.value = res.data as ExtendedTableData
        // 填充表单数据（URL 参数优先，如果 URL 中没有才使用 API 返回的数据）
        formData.apikey = ''
        formData.apisecret = ''
        if (!query.initial) {
          formData.initial = res.data.initial ? `$ ${res.data.initial}` : ''
        }
        if (!query.itime) {
          formData.itime = res.data.itime || ''
        }
        if (!query.opr && !query.oprid) {
          formData.oprid = res.data.oprid ? String(res.data.oprid) : ''
        }
        if (!query.remarks) {
          formData.remarks = res.data.remarks || ''
        }
        
        // 从 getAlphaprjApi 返回的数据中获取统计数据
        if (res.data.profit !== undefined || res.data.income !== undefined || 
            res.data.expenditure !== undefined || res.data.project !== undefined) {
          statsData.value = {
            profit: Number(res.data.profit) || 0,
            income: Number(res.data.income) || 0,
            expenditure: Number(res.data.expenditure) || 0,
            project: Number(res.data.project) || 0
          }
        }
        
        // 从 getAlphaprjApi 返回的数据中获取累计统计数据
        if (res.data.sltprf !== undefined || res.data.sltinc !== undefined || 
            res.data.sltexp !== undefined || res.data.sltprj !== undefined) {
          cumulativeStats.value = {
            sltprf: Number(res.data.sltprf) || 0,
            sltinc: Number(res.data.sltinc) || 0,
            sltexp: Number(res.data.sltexp) || 0,
            sltprj: Number(res.data.sltprj) || 0
          }
        }
        
        // 从 getAlphaprjApi 返回的数据中获取项目列表
        if (res.data.items && Array.isArray(res.data.items)) {
          projectList.value = res.data.items.map((item: any) => {
            // 格式化日期时间：从 "2025-10-29 19:00:00" 转为 "2025-10-29 19:00"
            let formattedTime = item.airdropTime || ''
            if (formattedTime) {
              try {
                // 使用 dayjs 格式化：YYYY-M-D HH:mm（去掉前导零）
                formattedTime = dayjs(formattedTime).format('YYYY-M-D HH:mm')
              } catch (e) {
                // 如果格式化失败，使用简单处理
                if (formattedTime.includes(' ')) {
                  const [date, time] = formattedTime.split(' ')
                  formattedTime = `${date} ${time ? time.substring(0, 5) : ''}`
                }
              }
            }
            
            return {
              items: {
                symbol: item.symbol || '',
                phase: item.phase || '(二段)',
                airdropTime: formattedTime,
                income: item.income || 0,
                token: item.token || item.score || 80, // 代币数，如果没有则使用默认值
                type: item.type || '空投' // 类型，默认为空投
              }
            }
          })
          
          // 计算累计统计数据
          calculateCumulativeStats()
        } else {
          projectList.value = []
        }
      }
    } catch (error) {
    } finally {
      if (!skipLoading) {
        formLoading.value = false
      }
    }
  }
}

// 获取操手列表
const getOperatorList = async () => {
  try {
    const res = await operatorNameApi()
    if (res && res.data) {
      operatorOptions.value = Array.isArray(res.data) ? res.data : (res.data.items || [])
    }
  } catch (error) {
  }
}

// 获取项目领取历史（现在数据从 getAlphaprjApi 获取，此函数保留用于日期范围变化时重新获取）
const getProjectHistory = async () => {
  if (!currentRow.value?.id) return
  
  projectHistoryLoading.value = true
  try {
    // 直接调用 getTableDet，因为它会调用 getAlphaprjApi 并处理 items 数据
    // skipLoading=true 避免两个 loading 状态冲突
    await getTableDet(true)
  } catch (error) {
    console.error('获取项目历史失败:', error)
  } finally {
    projectHistoryLoading.value = false
  }
}

// 计算累计统计数据（如果API没有返回，则从项目列表计算）
const calculateCumulativeStats = () => {
  // 如果 cumulativeStats 已经有值（从API获取），就不需要重新计算
  // 这个方法保留作为备用，但主要数据应该从 getAlphaprjApi 获取
  if (cumulativeStats.value.sltprf === 0 && cumulativeStats.value.sltinc === 0) {
    cumulativeStats.value = {
      sltprf: projectList.value.reduce((sum, item) => sum + (item.items?.income || 0), 0),
      sltinc: projectList.value.reduce((sum, item) => sum + (item.items?.income || 0), 0),
      sltexp: 0, // 需要从API获取
      sltprj: projectList.value.length
    }
  }
}

// 切换编辑状态（PC端）
const handleEdit = () => {
  isEditing.value = true
}

// 保存表单
const handleSave = async () => {
  console.log('handleSave 被调用', { 
    currentRowId: query?.id,
    formData 
  })
  
  if (!query?.id) {
    return
  }
  
  formLoading.value = true
  try {
    const saveData = {
      id: Number(query?.id),
      apikey: '',
      apisecret: '',
      initial: formData.initial.replace('$ ', '').replace(/,/g, ''),
      itime: formData.itime,
      oprid: formData.oprid,
      remarks: formData.remarks
    }
    
    await saveTableApi(saveData)
    // 保存成功后，退出编辑状态
    isEditing.value = false
    // 重新获取数据
    // await getTableDet()
  } catch (error) {

  } finally {
    formLoading.value = false
  }
}

// 计算运行天数（从itime到现在）
const runtimeDays = computed(() => {
  if (!formData.itime) return 0
  try {
    const startDate = dayjs(formData.itime)
    const endDate = dayjs()
    return endDate.diff(startDate, 'day')
  } catch (e) {
    return 0
  }
})

// 格式化日期范围显示（移动端）
const formattedDateRange = computed(() => {
  if (dateRange.value && dateRange.value.length === 2) {
    return `${dateRange.value[0]} 至 ${dateRange.value[1]}`
  }
  return ''
})

// 格式化初始本金（移动端，保留2位小数）
const formattedInitial = computed(() => {
  if (!formData.initial) return '$1,100.00'
  try {
    // 移除 $ 和空格，移除逗号，转换为数字
    const numStr = formData.initial.replace(/^\$\s?/, '').replace(/,/g, '')
    const num = Number(numStr)
    if (isNaN(num)) return '$1,100.00'
    return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
  } catch (e) {
    return '$1,100.00'
  }
})

// 日期范围变化
const handleDateRangeChange = () => {
  // 同步移动端日期选择器
  if (dateRange.value && dateRange.value.length === 2) {
    mobileStartDate.value = dateRange.value[0]
    mobileEndDate.value = dateRange.value[1]
  }
  // 当日期范围改变时，重新获取账户详情（会调用getAlphaprjApi）和项目历史
  getTableDet()
  getProjectHistory()
}

// 移动端开始日期变化
const handleMobileStartDateChange = (value: string) => {
  if (value) {
    mobileStartDate.value = value
    dateRange.value = [value, mobileEndDate.value]
    // 不在这里调用 handleDateRangeChange，避免循环调用
    getTableDet()
    getProjectHistory()
  }
}

// 移动端结束日期变化
const handleMobileEndDateChange = (value: string) => {
  if (value) {
    mobileEndDate.value = value
    dateRange.value = [mobileStartDate.value, value]
    // 不在这里调用 handleDateRangeChange，避免循环调用
    getTableDet()
    getProjectHistory()
  }
}

// 打开收益日历对话框（与AccountDialog.vue中的calendar函数效果一样）
const goToCalendar = () => {
  const id = query.id ? Number(query.id) : null
  if (!id) return
  
  // 根据oprid从operatorOptions中查找操手名称
  let oprName = currentRow.value?.oprName || ''
  if (!oprName && formData.oprid) {
    const operator = operatorOptions.value.find(opr => String(opr.id) === String(formData.oprid))
    oprName = operator?.name || ''
  }
  
  // 获取UID（优先使用currentRow中的，否则使用页面显示的默认值）
  const uid = query?.uid || ''
  
  dialogTitle.value = t('account.calendar')
  actionType.value = 'calendar'
  // 从URL获取id，创建包含id、uid和oprName的对象传递给Calendar组件
  calendarCurrentRow.value = {
    ...(currentRow.value || {}),
    id: id,
    uid: uid,
    oprName: oprName
  } as ExtendedTableData
  dialogCalendarVisible.value = true
}

onMounted(async () => {
  await getOperatorList()
  
  // 先从 URL 参数填充表单字段（优先级最高）
  fillFormFromUrl()
  
  // 检查 sessionStorage 中是否有列表数据
  const accountId = query.id as string
  if (accountId) {
    try {
      const rowDataStr = sessionStorage.getItem(`account_row_${accountId}`)
      if (rowDataStr) {
        const rowData = JSON.parse(rowDataStr)
        // 使用列表数据填充表单（但 URL 参数优先级更高，所以只填充 URL 中没有的字段）
        if (!query.initial && rowData.initial !== undefined && rowData.initial !== null && rowData.initial !== '') {
          formData.initial = `$ ${rowData.initial}`
        }
        if (!query.itime && rowData.itime) {
          formData.itime = rowData.itime
        }
        if (!query.opr && !query.oprid && rowData.oprid !== undefined && rowData.oprid !== null && rowData.oprid !== '') {
          formData.oprid = String(rowData.oprid)
        }
        if (!query.remarks && rowData.remarks) {
          formData.remarks = rowData.remarks
        }
        // 如果列表数据中有 currentRow 相关信息，也先填充
        if (rowData.uid) {
          currentRow.value = {
            ...(currentRow.value || {}),
            ...rowData
          } as ExtendedTableData
        }
        // 使用完后清除，避免数据过期
        sessionStorage.removeItem(`account_row_${accountId}`)
      }
    } catch (error) {
      console.error('读取列表数据失败:', error)
    }
  }
  
  // 然后调用API获取完整数据（包括敏感信息）
  await getTableDet()
  getProjectHistory()
})
</script>

<template>
  <div class="account-detail-page">
    <!-- 移动端头部信息 -->
    <div class="mobile-header">
      <div class="mobile-logo-uid">
        <img src="/logo.png" alt="Binance" class="mobile-binance-logo" />
        <span class="mobile-uid-text">
          <span class="uid-label">UID:</span>
          <span class="uid-number">{{ query?.uid}}</span>
        </span>
      </div>
      <!-- 信息行：小组、操手、运行时间、初始本金、当前余额 -->
      <div class="mobile-info-grid">
        <div class="mobile-info-item">
          <span class="mobile-info-label">小组</span>
          <span class="mobile-info-value">{{ query.grpName || currentRow?.grpName }}</span>
        </div>
        <div class="mobile-info-item">
          <span class="mobile-info-label">操手</span>
          <span class="mobile-info-value">{{ currentRow?.oprName || operatorOptions.find(opr => String(opr.id) === String(formData.oprid))?.name}}</span>
        </div>
        <div class="mobile-info-item">
          <span class="mobile-info-label">运行时间</span>
          <span class="mobile-info-value">{{ query.days || currentRow?.days }}天</span>
        </div>
        <div class="mobile-info-item">
          <span class="mobile-info-label">初始本金</span>
          <span class="mobile-info-value">{{ query.initial || currentRow?.initial }}</span>
        </div>
        <div class="mobile-info-item">
          <span class="mobile-info-label">当前余额</span>
          <span class="mobile-info-value">${{ Number(query?.balance || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
        </div>
      </div>
    </div>

    <!-- 账户配置区域 -->
    <div class="account-config-section">
      <ElCard shadow="never" class="config-card">
        <!-- 顶部：Logo + UID + 收益日历 -->
        <div class="config-header">
          <div class="logo-uid">
            <img src="/logo.png" alt="Binance" class="binance-logo" />
            <span class="uid-text">UID: {{ query?.uid}}</span>
          </div>
          <div class="calendar-link" @click="goToCalendar">
            <Icon icon="ep:calendar" />
            <span class="calendar-text">{{ t('account.calendar') }}</span>
          </div>
        </div>

        <!-- 表单区域 -->
        <ElSkeleton :loading="formLoading" animated :rows="6" class="form-skeleton">
          <div class="form-container">
            <div class="form-table">
              <!-- 第一行 -->
              <div class="form-row">
                <div class="form-cell">
                  <label class="form-label">{{ t('account.apikey') }}*</label>
                  <div class="form-input-wrapper">
                    <ElInput 
                      v-model="formData.apikey" 
                      placeholder="输入"
                      class="form-input"
                      disabled
                    />
                  </div>
                </div>
                <div class="form-cell">
                  <label class="form-label">{{ t('account.apisecret') }}*</label>
                  <div class="form-input-wrapper">
                    <ElInput 
                      v-model="formData.apisecret" 
                      type="password"
                      placeholder="输入"
                      class="form-input"
                      disabled
                    />
                  </div>
                </div>
                <div class="form-cell">
                  <label class="form-label">{{ t('account.initial') }}*</label>
                  <div class="form-input-wrapper">
                    <ElInput 
                      v-model="formData.initial" 
                      placeholder="输入"
                      class="form-input"
                      :disabled="!isEditing"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 第二行 -->
              <div class="form-row">
                <div class="form-cell">
                  <label class="form-label">{{ t('account.itime') }}*</label>
                  <div class="form-input-wrapper">
                    <ElDatePicker
                      v-model="formData.itime"
                      type="date"
                      placeholder="选择日期"
                      format="YYYY-M-D"
                      value-format="YYYY-M-D"
                      class="form-input"
                      :disabled="!isEditing"
                    />
                  </div>
                </div>
                <div class="form-cell">
                  <label class="form-label">{{ t('account.operator') }}</label>
                  <div class="form-input-wrapper">
                    <ElSelect 
                      v-model="formData.oprid" 
                      placeholder="选择"
                      class="form-input"
                      :disabled="!isEditing"
                    >
                      <ElOption
                        v-for="opr in operatorOptions"
                        :key="String(opr.id)"
                        :label="opr.name"
                        :value="String(opr.id)"
                      />
                    </ElSelect>
                  </div>
                </div>
                <div class="form-cell">
                  <label class="form-label">{{ t('account.remarks') }}</label>
                  <div class="form-input-wrapper">
                    <ElInput 
                      v-model="formData.remarks" 
                      placeholder="输入"
                      class="form-input"
                      :disabled="!isEditing"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ElSkeleton>
        
        <!-- 修改/保存按钮 -->
        <div class="form-actions">
          <ElButton 
            v-if="!isEditing"
            type="primary" 
            @click="handleEdit"
            class="save-btn"
          >
            修改
          </ElButton>
          <ElButton 
            v-else
            type="primary" 
            @click="handleSave"
            :loading="formLoading"
            class="save-btn"
          >
            保存
          </ElButton>
        </div>
      </ElCard>
    </div>

    <!-- 项目领取历史区域 -->
    <div class="project-history-section">
      <h2 class="section-title">项目领取历史</h2>
      
      <!-- 统计卡片 -->
      <ElRow :gutter="20" class="stats-row">
        <ElCol :span="6">
          <ElCard shadow="never" class="stat-card">
            <div class="stat-content">
              <div class="stat-label">总利润</div>
              <div class="stat-value">$ {{ statsData.profit.toFixed(2) }}</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard shadow="never" class="stat-card">
            <div class="stat-content">
              <div class="stat-label">空投总收益</div>
              <div class="stat-value">$ {{ statsData.income.toFixed(2) }}</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard shadow="never" class="stat-card">
            <div class="stat-content">
              <div class="stat-label">总损耗</div>
              <div class="stat-value">$ {{ statsData.expenditure.toFixed(2) }}</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard shadow="never" class="stat-card">
            <div class="stat-content">
              <div class="stat-label">项目总数</div>
              <div class="stat-value">{{ statsData.project }}</div>
            </div>
          </ElCard>
        </ElCol>
      </ElRow>

      <!-- 日期范围选择器和累计统计 -->
      <div class="date-filter-section">
        <div class="date-range">
          <Icon icon="ep:calendar" />
          <ElDatePicker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-M-D"
            value-format="YYYY-M-D"
            @change="handleDateRangeChange"
            class="date-picker"
          />
        </div>
        <div class="cumulative-stats">
          <span class="cumulative-item">累计利润 <span style="color: #409EFF;"> ${{ cumulativeStats.sltprf.toFixed(2) }}</span></span>
          <span class="cumulative-item">累计空投收益 <span style="color: #409EFF;">${{ cumulativeStats.sltinc.toFixed(2) }}</span></span>
          <span class="cumulative-item">累计损耗 <span style="color: #409EFF;">${{ cumulativeStats.sltexp.toFixed(2) }}</span></span>
          <span class="cumulative-item">累计项目 <span style="color: #409EFF;">{{ cumulativeStats.sltprj }}</span></span>
        </div>
      </div>

      <!-- 移动端日期范围选择器 -->
      <div class="mobile-date-range">
        <div class="mobile-date-item mobile-date-item-start">
          <div class="mobile-date-picker-wrapper">
            <ElDatePicker
            style="width: 158px;"
              v-model="mobileStartDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-M-D"
              value-format="YYYY-M-D"
              @change="handleMobileStartDateChange"
              class="mobile-date-picker-single"
              :teleported="false"
              :default-value="new Date()"
            />
            <span class="mobile-date-label mobile-date-label-start">开始</span>
          </div>
        </div>
        <div class="mobile-date-item mobile-date-item-end">
          <div class="mobile-date-picker-wrapper">
            <ElDatePicker
              style="width: 158px;"
              v-model="mobileEndDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-M-D"
              value-format="YYYY-M-D"
              @change="handleMobileEndDateChange"
              class="mobile-date-picker-single"
              :teleported="false"
              :default-value="new Date()"
            />
            <span class="mobile-date-label mobile-date-label-end">结束</span>
          </div>
        </div>
      </div>

      <!-- 移动端累计利润区域 -->
      <div class="mobile-profit-section">
        <div class="mobile-profit-card">
          <div class="mobile-profit-left">
            <span class="mobile-profit-title">累计利润</span>
            <Icon icon="ep:wallet" class="mobile-profit-icon" />
          </div>
          <div class="mobile-profit-right">
            <span class="mobile-profit-currency">USDT</span>
            <span class="mobile-profit-value">${{ cumulativeStats.sltprf.toFixed(2) }}</span>
          </div>
        </div>
        <div class="mobile-profit-stats">
          <div class="mobile-profit-stat-item">
            <span class="mobile-profit-stat-label">累计空投收益</span>
            <span class="mobile-profit-stat-value">${{ cumulativeStats.sltinc.toFixed(2) }}</span>
          </div>
          <div class="mobile-profit-stat-item">
            <span class="mobile-profit-stat-label">累计损耗</span>
            <span class="mobile-profit-stat-value">${{ cumulativeStats.sltexp.toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <!-- PC端项目列表 -->
      <ElSkeleton :loading="projectHistoryLoading" animated :rows="9">
        <div class="project-list">
          <ElRow :gutter="20">
            <ElCol 
              v-for="(project, index) in projectList" 
              :key="index"
              :span="8"
              class="project-item-col"
            >
              <ElCard shadow="never" class="project-card">
                <div class="project-content">
                  <div class="project-info">
                    <span class="project-name">{{ project.items.symbol || '' }}</span>
                    <span class="project-time">{{ project.items.airdropTime || '' }}</span>
                  </div>
                  <div class="project-amount">${{ Number(project.items.income || 0).toFixed(2) }}</div>
                </div>
              </ElCard>
            </ElCol>
          </ElRow>
        </div>
      </ElSkeleton>

      <!-- 移动端累计项目历史 -->
      <div class="mobile-project-history">
        <div class="mobile-project-history-header">
          <span class="mobile-project-history-title">累计项目历史</span>
          <span class="mobile-project-history-count">累计数目: {{ cumulativeStats.sltprj }}</span>
        </div>

        <!-- 移动端项目列表 -->
        <ElSkeleton :loading="projectHistoryLoading" animated :rows="9">
          <div class="mobile-project-list">
            <div 
              v-for="(project, index) in projectList" 
              :key="index"
              class="mobile-project-item"
            >
              <div class="mobile-project-left">
                <div class="mobile-project-name">{{ project.items.symbol || '' }}</div>
                <div class="mobile-project-time">{{ project.items.airdropTime || '' }}</div>
              </div>
              <div class="mobile-project-middle">
                <div class="mobile-project-token">代币</div>
                <div class="mobile-project-type">{{ project.items.type || '空投' }}</div>
              </div>
              <div class="mobile-project-right">
                <div class="mobile-project-amount">${{ Number(project.items.income || 0).toFixed(2) }}</div>
                <div class="mobile-project-income-label">收益</div>
              </div>
            </div>
          </div>
        </ElSkeleton>

        <!-- 移动端加载更多提示 -->
        <!-- <div class="mobile-load-more">
          <span>下拉加载更多</span>
        </div> -->
      </div>
    </div>
  </div>

  <!-- 收益日历对话框 -->
  <Dialog v-model="dialogCalendarVisible" :title="dialogTitle" width="800px" :maxHeight="640">
    <Calendar
      v-if="actionType === 'calendar'"
      :detail-schema="[]"
      :current-row="calendarCurrentRow"
    />
  </Dialog>
</template>

<style scoped lang="less">
.account-detail-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

// 账户配置区域
.account-config-section {
  margin-bottom: 40px;
  
  .config-card {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
    
    :deep(.el-card__body) {
      padding: 24px;
    }
  }
  
  .config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .logo-uid {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .binance-logo {
        width: 32px;
        height: 32px;
        object-fit: contain;
        border-radius: 50%;
      }
      
      .uid-text {
        font-size: 16px;
        font-weight: 700;
        color: #303133;
      }
    }
    
    .calendar-link {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 14px;
      
      :deep(svg) {
        color: #7c3aed;
      }
      
      .calendar-text {
        color: #303133;
      }
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
  
  .form-skeleton {
    position: relative;
    z-index: 1;
    
    :deep(.el-skeleton__item) {
      z-index: 1;
    }
  }
  
  .form-container {
    .form-table {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .form-row {
      display: flex;
      border-bottom: 1px solid #ebeef5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .form-cell {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 16px;
        border-right: 1px solid #ebeef5;
        
        &:last-child {
          border-right: none;
        }
        
        .form-label {
          min-width: 100px;
          font-size: 14px;
          color: #606266;
          font-weight: 500;
          margin-right: 16px;
          flex-shrink: 0;
        }
        
        .form-input-wrapper {
          flex: 1;
          
          .form-input {
            width: 100%;
          }
        }
      }
    }
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    
    .save-btn {
      padding: 10px 32px;
      font-size: 14px;
      border-radius: 6px;
      position: relative;
      z-index: 11;
      pointer-events: auto;
      cursor: pointer;
    }
  }
}

// 项目领取历史区域
.project-history-section {
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 24px 0;
  }
  
  .stats-row {
    margin-bottom: 24px;
    
      .stat-card {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        background: #fff;
        height: 140px;
        
        :deep(.el-card__body) {
          padding: 24px;
          height: 100%;
          display: flex;
          align-items: center;
        }
        
        .stat-content {
          width: 100%;
          
          .stat-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            
            .stat-label {
              font-size: 14px;
              color: #909399;
            }
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 16px;
            display: block;
          }
          
          .stat-value {
            display: flex;
            flex-direction: column;
            gap: 4px;
            
            .currency {
              font-size: 12px;
              color: #909399;
            }
            
            .amount {
              font-size: 28px;
              font-weight: 700;
              color: #303133;
              line-height: 1.2;
            }
            
            font-size: 28px;
            font-weight: 700;
            color: #303133;
            line-height: 1.2;
          }
        }
      }
  }
  
  .date-filter-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 4px;
    
    .date-range {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .date-picker {
        width: 280px;
      }
    }
    
    .cumulative-stats {
      display: flex;
      gap: 24px;
      
      .cumulative-item {
        font-size: 14px;
        color: #606266;
      }
    }
  }
  
  .project-list {
    .project-item-col {
      margin-bottom: 20px;
    }
    
    .project-card {
      border: 1px solid #ebeef5;
      border-radius: 8px;
      background: #fff;
      
      :deep(.el-card__body) {
        padding: 16px 20px;
      }
      
      .project-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        .project-info {
          display: flex;
          align-items: baseline;
          gap: 12px;
          flex: 1;
          
          .project-name {
            font-size: 15px;
            color: #303133;
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          }
          
          .project-time {
            font-size: 13px;
            color: #909399;
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          }
        }
        
        .project-amount {
          font-size: 18px;
          font-weight: 700;
          color: #303133;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          flex-shrink: 0;
        }
      }
    }
  }
}

// 移动端响应式样式
@media (max-width: 768px) {
  .account-detail-page {
    padding: 0;
    background-color: #fff;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  // 隐藏PC端的账户配置区域
  .account-config-section {
    display: none;
  }

  // 隐藏PC端的统计卡片
  .project-history-section .stats-row {
    display: none;
  }

  // 隐藏PC端的日期选择器和累计统计
  .project-history-section .date-filter-section {
    display: none;
  }

  // 隐藏PC端的项目列表
  .project-list {
    display: none;
  }

  // 隐藏PC端的标题
  .project-history-section .section-title {
    display: none;
  }

  // 移动端头部
  .mobile-header {
    margin: 16px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    width: calc(100% - 32px);
    box-sizing: border-box;
    overflow: hidden;
    
    .mobile-logo-uid {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      
      .mobile-binance-logo {
        width: 32px;
        height: 32px;
        object-fit: contain;
        border-radius: 50%;
      }
      
      .mobile-uid-text {
        font-size: 16px;
        color: #303133;
        display: flex;
        align-items: baseline;
        gap: 4px;
        
        .uid-label {
          font-weight: 400;
          font-size: 16px;
        }
        
        .uid-number {
          font-weight: 600;
          font-size: 18px;
        }
      }
    }
    
    .mobile-info-grid {
      display: flex;
      flex-wrap: nowrap;
      align-items: start;
      gap: 0;
      width: 100%;
      
      .mobile-info-item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 0 0;
        margin-right: -5px;
        
        &:last-child {
          margin-right: 0;
        }
        
        // 操手项向左移动5px
        &:nth-child(2) {
          margin-left: -5px;
        }
        
        .mobile-info-label {
          font-size: 12px;
          color: #909399;
          font-weight: 400;
          line-height: 1.3;
          word-break: break-word;
          text-align: center;
          white-space: normal;
        }
        
        .mobile-info-value {
          font-size: 12px;
          color: #303133;
          font-weight: 400;
          line-height: 1.3;
          word-break: break-word;
          text-align: center;
          white-space: normal;
        }
      }
    }
  }

  // 移动端日期范围
  .mobile-date-range {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    margin: -14px 8px 0 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    
    .mobile-date-item {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      position: relative !important;
      
      &.mobile-date-item-start {
        max-width: 40% !important;
        width: 40% !important;
        flex: 0 0 40% !important;
        margin-left: 0 !important;
      }
      
      &.mobile-date-item-end {
        max-width: 40% !important;
        width: 40% !important;
        flex: 0 0 40% !important;
      }
      
      .mobile-date-picker-wrapper {
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        
        .mobile-date-label {
          position: absolute !important;
          right: 8px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          pointer-events: none !important;
          z-index: 10 !important;
          font-size: 12px !important;
          color: #909399 !important;
          font-weight: 400 !important;
          line-height: 1 !important;
          
          &.mobile-date-label-start {
            right: 8px !important;
          }
          
          &.mobile-date-label-end {
            right: 8px !important;
          }
        }
      }
      
      .mobile-date-picker-single {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
        position: relative !important;
        overflow: hidden !important;
        
        :deep(.el-date-editor) {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
          overflow: hidden !important;
        }
        
        :deep(.el-input__wrapper) {
          padding: 8px 6px !important;
          height: 40px !important;
          font-size: 12px !important;
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
          flex-shrink: 1 !important;
          overflow: hidden !important;
        }
        
        :deep(.el-input__inner) {
          font-size: 12px !important;
          padding: 0 25px 0 4px !important;
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
        }
        
        :deep(.el-input__suffix) {
          padding-right: 4px !important;
          flex-shrink: 0 !important;
        }
        
        :deep(.el-input__prefix) {
          padding-left: 4px !important;
          flex-shrink: 0 !important;
        }
        
        // 移动端单个日期选择器弹窗样式优化
        :deep(.el-picker__popper) {
          width: 90vw !important;
          max-width: 400px !important;
          position: fixed !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          margin-left: 0 !important;
          max-height: 80vh !important;
          overflow-y: auto !important;
          z-index: 3000 !important;
          
          .el-date-picker {
            width: 100% !important;
            max-width: 100% !important;
          }
          
          .el-picker-panel__body {
            padding: 8px !important;
          }
          
          .el-picker-panel__content {
            font-size: 13px !important;
            
            .el-date-table {
              td {
                padding: 2px 0 !important;
                
                .el-date-table__cell {
                  height: 32px !important;
                  line-height: 32px !important;
                  font-size: 13px !important;
                }
              }
              
              th {
                padding: 6px 0 !important;
                font-size: 12px !important;
              }
            }
          }
          
          // 优化月份标题区域，支持点击选择年份和月份
          .el-picker-panel__header {
            padding: 8px 12px !important;
            
            .el-picker-panel__icon-btn {
              font-size: 14px !important;
              width: 32px !important;
              height: 32px !important;
            }
            
            .el-date-picker__header-label {
              font-size: 14px !important;
              cursor: pointer !important;
              padding: 4px 8px !important;
              border-radius: 4px !important;
              
              &:hover {
                background-color: #f5f7fa !important;
              }
            }
          }
          
          // 年份和月份选择面板样式
          .el-year-table,
          .el-month-table {
            .el-year-table__cell,
            .el-month-table__cell {
              padding: 8px 0 !important;
              
              .cell {
                font-size: 14px !important;
                height: 36px !important;
                line-height: 36px !important;
              }
            }
          }
        }
      }
    }
    
    .mobile-date-separator {
      font-size: 14px;
      color: #606266;
      padding: 0 4px;
      flex-shrink: 0;
    }
  }

  // 移动端累计利润区域
  .mobile-profit-section {
    margin: 0 16px 16px 16px;
    
    .mobile-profit-card {
      padding: 24px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      
      .mobile-profit-left {
        display: flex;
        flex-direction: column;
        gap: 13px;
        margin-left: 20px;
        
        .mobile-profit-title {
          font-size: 16px;
          color: #303133;
          font-weight: 400;
        }
        
        .mobile-profit-icon {
          font-size: 16px;
          margin-left: 15px;
          
          :deep(svg) {
            color: #409eff;
            width: 18px;
            height: 18px;
            opacity: 0.8;
          }
        }
      }
      
      .mobile-profit-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        transform: translateX(-30px);
        
        .mobile-profit-currency {
          font-size: 16px;
          color: #909399;
          font-weight: 400;
        }
        
        .mobile-profit-value {
          color: #1e90ff;
          line-height: 1.2;
        }
      }
    }
    
    .mobile-profit-stats {
      display: flex;
      gap: 12px;
      
      .mobile-profit-stat-item {
        flex: 1;
        padding: 16px;
        background: #fff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .mobile-profit-stat-label {
          font-size: 16px;
          color: #303133;
          font-weight: 400;
          text-align: center;
        }
        
        .mobile-profit-stat-value {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          text-align: center;
        }
      }
    }
  }

  // 移动端累计项目历史
  .mobile-project-history {
    margin: 16px;
    
    .mobile-project-history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .mobile-project-history-title {
        font-size: 16px;
        color: #303133;
        font-weight: 500;
      }
      
      .mobile-project-history-count {
        font-size: 16px;
        color: #606266;
      }
    }
    
    .mobile-project-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .mobile-project-item {
        display: flex;
        padding: 12px;
        background: #f5f7fa;
        border-radius: 8px;
        gap: 12px;
        
        .mobile-project-left {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .mobile-project-name {
            font-size: 14px;
            color: #303133;
            font-weight: 500;
          }
          
          .mobile-project-time {
            font-size: 12px;
            color: #909399;
          }
        }
        
        .mobile-project-middle {
          flex: 0 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 0 12px;
          
          .mobile-project-token {
            font-size: 14px;
            color: #303133;
            font-weight: 500;
          }
          
          .mobile-project-type {
            font-size: 12px;
            color: #606266;
          }
        }
        
        .mobile-project-right {
          flex: 0 0 auto;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 4px;
          
          .mobile-project-amount {
            font-size: 16px;
            font-weight: 700;
            color: #303133;
          }
          
          .mobile-project-income-label {
            font-size: 12px;
            color: #606266;
          }
        }
      }
    }
  }

  // 移动端加载更多
  .mobile-load-more {
    display: flex;
    justify-content: center;
    padding: 16px;
    
    span {
      font-size: 14px;
      color: #409eff;
    }
  }
}

// PC端：隐藏移动端元素
@media (min-width: 769px) {
  .mobile-header,
  .mobile-date-range,
  .mobile-profit-section,
  .mobile-project-history,
  .mobile-project-list,
  .mobile-load-more {
    display: none;
  }
  
  // 确保PC端的项目列表显示
  .project-list {
    display: block;
  }
}
</style>